<template>
  <div ref="chartRef" :style="{width: '100%'}"/>
</template>
<script lang="ts">
import { defineComponent, ref, Ref, onMounted } from 'vue'

import { useApexCharts } from '@/hooks/useApexCharts'

export default defineComponent({
  setup() {
    const chartRef = ref<HTMLDivElement | null>(null)
    const { setOptions } = useApexCharts(chartRef as Ref<HTMLDivElement>)

    onMounted(() => {
      setOptions({
        series: [
          {
            name: 'Desktops',
            data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
          }
        ],
        chart: {
          height: 350,
          type: 'line',
          zoom: {
            enabled: false
          }
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: 'straight'
        },
        title: {
          text: 'Product Trends by Month',
          align: 'left'
        },
        grid: {
          row: {
            colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
            opacity: 0.5
          }
        },
        xaxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']
        }
      })
    })
    return { chartRef }
  }
})
</script>
